<template>
	<view class="l-checkbox" :class="[rootCasses]" :style="[styles]" @click="handleChange">
		<slot name="checkbox" :checked="isChecked" :disabled="isDisabled">
			<slot name="icon" :checked="isChecked" :disabled="isDisabled">
				<view class="l-checkbox__icon" ref="iconRef" :class="iconClasses" :style="[iconStyle]"></view>
			</slot>
			<text class="l-checkbox__label" :class="labelClass" v-if="label || $slots['default']">
				<slot>{{label}}</slot>
			</text>
		</slot>
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	import { ManageChildInList, CheckboxStatus, OnCheckedChange, CheckboxChangeOptions, ComputedRef } from './type';
	import { computed, defineComponent, ref, inject, getCurrentInstance, onBeforeUnmount } from '@/uni_modules/lime-shared/vue'
	import checkboxProps from './props'
	const name = 'l-checkbox';
	export default defineComponent({
		name,
		props: checkboxProps,
		emits: ['update:modelValue', 'input', 'change'],
		setup(props, { emit }) {
			const instance = getCurrentInstance()!
			const checkboxGroup = inject<LCheckboxGroupComponentPublicInstance|null>('limeCheckboxGroup', null);
			const checkboxGroupValue = inject<ComputedRef<any[]>|null>('limeCheckboxGroupValue', null);
			const checkboxGroupStatus = inject<ComputedRef<CheckboxStatus>|null>('limeCheckboxGroupStatus', null);
			const checkboxGroupCheckedSet = inject<ComputedRef<Set<any>>|null>('limeCheckboxGroupCheckedSet', null);
			const manageChildInList = inject<ManageChildInList|null>('limeCheckboxGroupManageChildInList', null);
			const onCheckedChange = inject<OnCheckedChange|null>('limeCheckboxGroupOnCheckedChange', null);
			if(manageChildInList != null) {
				manageChildInList(instance.proxy as LCheckboxComponentPublicInstance, true)
			}
			
			const max = computed(():number => checkboxGroup?.max ?? -1)
			
			const _innerChecked = ref(props.checked || props.modelValue || props.value || props.defaultChecked)
			const innerChecked = computed({
				set(value: boolean) {
					_innerChecked.value = value
					emit('update:modelValue', value)
					emit('change', value)
					// #ifdef VUE2
					emit('input', value)
					// #endif
				},
				get():boolean {
					const value = (props.checked ?? props.modelValue ?? props.value)
					if(value != null) return value
					return _innerChecked.value
					
					// return props.checked || props.modelValue || props.value || _innerChecked.value
				}
			} as WritableComputedOptions<boolean>)
			
			const isChecked = computed(():boolean=>{
				if (props.checkAll) {
					const checkAllStatus = checkboxGroupStatus?.value || 'uncheck';
					return checkAllStatus == 'checked' || checkAllStatus == 'indeterminate'
				}
				const value = props.value || props.name;
				if (checkboxGroupCheckedSet && value) {
					return checkboxGroupCheckedSet.value.has(value)
				}
				return innerChecked.value;
			})
			
			const isDisabled = computed(():boolean=>{
				if(max.value > -1 && checkboxGroupValue) {
					return max.value <= checkboxGroupValue.value.length && !isChecked.value;
				}
				if (props.disabled) return props.disabled;
				return checkboxGroup?.disabled || false;
			})
			
			const isIndeterminate = computed(():boolean=>{
				if (props.checkAll && checkboxGroupStatus) return checkboxGroupStatus.value == 'indeterminate';
				return props.indeterminate;
			})
			
			const innerIcon = computed(():string => checkboxGroup?.icon || props.icon)
			const innerSize = computed(():string => checkboxGroup?.size || props.size)
			const innerIconSize = computed(():string|null => checkboxGroup?.iconSize || props.iconSize)
			const innerCheckedColor = computed(():string|null => checkboxGroup?.checkedColor || props.checkedColor)
			const innerIconBgColor = computed(():string => props.iconBgColor || checkboxGroup?.iconBgColor || 'white')
			const innerIconBorderColor = computed(():string => props.iconBorderColor || checkboxGroup?.iconBorderColor || '#c5c5c5')
			const innerIconDisabledColor = computed(():string => props.iconDisabledColor || checkboxGroup?.iconDisabledColor || '#c5c5c5')
			const innerIconDisabledBgColor = computed(():string => props.iconDisabledBgColor || checkboxGroup?.iconDisabledBgColor || '#f3f3f3')
			
			
			const rootCasses = computed(()=>{
				const cls = [`${name}--${props.size}`]
				if(isDisabled.value) {
					cls.push(`${name}--disabled`)
				}
				return cls.join(' ')
			})
			
			const iconClasses = computed(()=>{
				const cls = [`${name}__icon--${props.icon}`]
				if(isChecked.value) {
					cls.push(`${name}__icon--checked`)
				}
				if(isDisabled.value) {
					cls.push(`${name}__icon--disabled`)
				}
				if(isIndeterminate.value) {
					cls.push(`${name}__icon--indeterminate`)
				}
				return cls.join(' ')
			})
			
			const labelClass = computed(()=>{
				const cls = [];
				if(isDisabled.value) {
					cls.push(`${name}__label--disabled`)
				}
				return cls.join(' ')
			})
			
			const styles = computed(()=>{
				const style:Record<string, any> = {};
				if(checkboxGroup && checkboxGroup.gap) {
					style[checkboxGroup.direction == 'horizontal' ? 'margin-right' : 'margin-bottom'] = checkboxGroup.gap!
				}
				if(innerCheckedColor.value) {
					style['--l-checkbox-icon-checked-color'] = innerCheckedColor.value!
				}
				if(innerIconBorderColor.value) {
					style['--l-checkbox-icon-border-color'] = innerIconBorderColor.value!
				}
				if(innerIconDisabledColor.value) {
					style['--l-checkbox-icon-disabled-color'] = innerIconDisabledColor.value!
				}
				if(innerIconDisabledBgColor.value) {
					style['--l-checkbox-icon-disabled-bg-color'] = innerIconDisabledBgColor.value!
				}
				return style
			})
			
			const iconStyle = computed(()=>{
				const style:Record<string, any> = {}
				if(innerIconSize.value) {
					style['width'] = innerIconSize.value!
					style['height'] = innerIconSize.value!
					style['--l-checkbox-icon-size'] = innerIconSize.value!
				}
				return style
			})
			
			const labelStyle = computed(()=>{
				const style:Record<string, any> = {}
				const fontSize = props.fontSize || checkboxGroup?.fontSize
				if(fontSize) {
					style['font-size'] = fontSize
				}
				return style
			})
			
			const handleChange = (e: UniPointerEvent) => {
				if (isDisabled.value) return;
				const value = !isChecked.value;
				innerChecked.value = value;
				
				if(onCheckedChange) {
					onCheckedChange({
						checked: value, 
						checkAll: props.checkAll,
						value: props.value || props.name //?? instance.uid
					})
				}
			}
			
			onBeforeUnmount(()=>{
				if(manageChildInList) {
					manageChildInList(instance.proxy as LCheckboxComponentPublicInstance, false)
				}
			})
			
			
			return {
				isChecked,
				isDisabled,
				rootCasses,
				iconClasses,
				labelClass,
				styles,
				iconStyle,
				labelStyle,
				handleChange
			}
		}
	})
</script>
<style lang="scss">
	@import './index-u';
</style>